import { Card } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';

let map: any;
const Index = () => {
  useEffect(() => {
    AMapLoader.load({
      key: 'dbbf8fe89bcb0aa16e8d68c68923cad6', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          zoom: 14, //级别
          center: [120.26408, 30.305451], //中心点坐标
          viewMode: '3D', //使用3D视图
          mapStyle: 'amap://styles/dark', //设置地图的显示样式
        });
        //实时路况图层
        // const satellite = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(satellite); //添加图层到地图

        // 添加点标记
        const marker = new AMap.Marker({
          position: [120.26408, 30.305451], //位置
        });
        map.add(marker); //添加到地图

        const lineArr = [
          [120.26408, 30.305451],
          [120.264246, 30.305764],
          [120.266301, 30.306046],
          [120.266397, 30.307848],
          [120.262696, 30.307959],
        ];
        const polyline = new AMap.Polyline({
          path: lineArr, //设置线覆盖物路径
          strokeColor: '#3366FF', //线颜色
          strokeWeight: 5, //线宽
          strokeStyle: 'solid', //线样式
        });
        map.add(polyline);

        // marker.on('click', () => {
        //   console.log(123);
        // });
        map.on('click', (e: any) => {
          // console.log(e);
          const marker = new AMap.Marker({
            position: [e.lnglat.lng, e.lnglat.lat], //位置
          });
          map.add(marker); //添加到地图
        });

        AMap.plugin('AMap.ToolBar', function () {
          //异步加载插件
          const toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        AMap.plugin('AMap.Scale', function () {
          //异步加载插件
          const scale = new AMap.Scale();
          map.addControl(scale);
        });

        const circle = new AMap.Circle({
          center: new AMap.LngLat('120.266397', '30.307848'), // 圆心位置
          radius: 1000, //半径
          strokeColor: '#F33', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 3, //线粗细度
          fillColor: '#ee2200', //填充颜色
          fillOpacity: 0.35, //填充透明度
        });
        map.add(circle);

        // 地图加载完成
        map.on('complete', function () {
          // 地图图块加载完成后触发
          console.log('地图加载完成');
          map.setFitView();
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map.destroy();
    };
  }, []);

  return (
    <Card title="地图">
      <div id="container" style={{ height: 400 }}></div>
    </Card>
  );
};

export default Index;
